<template>
  <view>
    <view class="u-page">
      <!-- 顶部的个人抬头 -->
      <view class="grTitle">
        <view class="name">{{ userInfo.userName }}，{{getTime()}}</view>
        <view class="welcome">{{welarr[Math.floor((Math.random()*welarr.length))]}}</view>
      </view>

      <!-- 通用功能 -->
      <!-- <view class="commonMenus" v-if="menuConfigs">
					<view class="buttom" v-for="(item, index) in menuConfigs.commonMenus" :key="index" @click.prevent.stop="parseMenuButtonClick(item)">
						<view class="logo" :style="item.style">
							<image class="icon" :src="getFmtImage(item.icon)" mode=""></image>
						</view>
						<view class="name">{{item.name}}</view>
					</view>
				</view> -->

      <!-- 两块提示 
      <view class="tips" v-if="tipList">
        <view class="tip" :class="{ tb2: index == 1 }" v-for="(item, index) in tipList" :key="index" @click.prevent.stop="parseMenuButtonClick(item)">
          <view class="txt">
            <view class="intro"> {{ item.name }} </view>
            <view class="num"><text class="zi">{{ numObj[item.name] || 0 }} </text>{{ item.uni }}</view>
          </view>
        </view>
      </view>
      -->

      <view class="tips" v-if="menuConfigs.topMenus">
        <view class="tip" v-for="(item, index) in menuConfigs.topMenus" :key="index" @click.prevent.stop="parseMenuButtonClick(item)">
          <view class="txt">
            <view class="intro"> {{ item.name }} </view>
            <view class="num"><text class="zi">{{ numObj[item.name] || 0 }} </text>{{ item.uni || '个' }}</view>
          </view>
          <view class="iconImg"><image :src="getFmtImage(item.icon)"></view>
        </view>
      </view>

      <!-- 功能区 -->
      <view v-if="menuConfigs">
        <view class="extMenus" v-for="(group, groupIndex) in extMenu" :key="groupIndex">
          <!-- <view class="group-name">{{group.groupName}}</view> -->
          <swiper class="swiper" :indicator-dots="group.paginationList.length > 1" :style="swiperHeightStyle">
            <swiper-item v-for="(g2, g2Index) in group.paginationList" :key="g2Index">
              <view class="list"> 
                <view class="buttom" v-for="(item, index) in g2" :key="index"
                  @click="parseMenuButtonClick(item)">
                  <view class="logo" :style="item.style">
                    <image class="icon" :src="getFmtImage(item.icon)" mode="aspectFit"></image>
                  </view>
                  <view class="name">{{ item.name }}</view>
                  <view class="num" v-if="numObj[item.name]">{{numObj[item.name]}}</view>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>

      <!-- 通知公告区 -->
      <view class="notice" v-if="ggtzItem">
        <view class="nr" @click="__handleExtButtonClick(globalConfig.IndexGgtzConfig.detailPage, ggtzItem);">
          <u-notice-bar :text="ggtzItem.name || ggtzItem.title" bgColor="#ffffff"></u-notice-bar>
        </view>
        <!-- <u-notice-bar bgColor="#ffffff" :text="text1"></u-notice-bar> -->
      </view>

      <!-- 文章区域 -->
      <view class="indexColumns" v-if="contentTabIndex != -1">
        <u-sticky bgColor="#fff" zIndex="1">
          <u-tabs :list="contents" keyName="columnName" :current="contentTabIndex" @click="onContentTabClick"
            :activeStyle="{
              color: '#4a4a4a',
              'font-size': '17px',
              'font-weight': 'bold',
            }" :inactiveStyle="{ color: '#8994a9', 'font-size': '17px' }"></u-tabs>
        </u-sticky>
        <view class="contentList" v-if="contents[contentTabIndex] && contents[contentTabIndex].list">
          <view class="contentItem" v-for="(item, index) in contents[contentTabIndex].list" :key="index" @click="showContentDetail(item)">
            <view class="pic" v-if="item.img">
              <image :src="getFmtImage(item.img)" mode="aspectFill"></image>
            </view>
            <!-- <view class="pic" v-else>
              <image :src="'https://source.unsplash.com/user/erondu/150x9' + (index%10)" mode="aspectFill"></image>
            </view> -->
            <view class="detail">
              <view class="title">{{ item.name }}</view>
              <view class="date">{{ item.date }}</view>
            </view>
          </view>
        </view>
      </view>

      <u-gap height="70" bgColor="transparent"></u-gap>
    </view>
    <mytabbar></mytabbar>
  </view>
</template>

<script>
  import mytabbar from "@/components/tabbar/index.vue";
  import sceneMixins from "@/utils/sceneMixins";
  import _ from "lodash";
  import {
    mapState,
    mapMutations
  } from "vuex";
  export default {
    mixins: [sceneMixins],
    components: {
      mytabbar: mytabbar
    },
    data() {
      return {
        topAd: [],
        contentTabIndex: -1,
        contents: [],
        extMenu: [],
        numObj: {},
        swiperHeightStyle: 'height: 430rpx;',
        tipList: [{
            name: "待收公文",
            num: "6",
            uni: "份"
          },
          {
            name: "待办工作",
            num: "8",
            uni: "项"
          },
        ],
        welarr: [
          '对未来的真正慷慨，是把一切都献给现在！',
          '明天会更好！',
          '有道理不如有效率，有效率不如有效果。',
          '一分耕耘，一分收获；要收获的好，必须耕耘的好。',
          '失败只是代表你的努力还不够。',
          '失信于天下，自绝于未来。',
          '不要害怕未知的事物。'
        ],
        ggtzItem: ''
      };
    },
    computed: {
      ...mapState(["menuConfigs", "userInfo"]),
    },
    onShow() {
      var vm = this;
      vm.waitVariable('globalConfig').then(() => {
        vm.$jg.judge("login").then(() => {
          vm.waitVariable("userInfo").then((v) => {
            vm.getSpaceConfig().then((data) => {
              var spaceName = data.spaceName;
              uni.setNavigationBarTitle({
                title: spaceName
              });

              // 设置文章区域
              if (!vm.contentLoaded) {
                vm.contents = data.contents || [];
                vm.loadContents();
              }

              vm.paginationExtMenu();

              vm.loadGgtz();
              vm.updateNumber();
            });
          });
        });
      });
    },
    onLoad() {
      // #ifdef MP-WEIXIN
      wx.showShareMenu({
        withShareTicket: true,
        menus: ["shareAppMessage", "shareTimeline"],
      });
      // #endif
    },
    options: {
      styleIsolation: "shared"
    },
    methods: {
      paginationExtMenu: function () {
        var extMenu = JSON.parse(JSON.stringify(this.menuConfigs.extMenus));
        extMenu.forEach(n => {
          n.paginationList = this.getByPaganation(n.list, this.globalConfig.indexGroupSize || 6);
        });
 
        if (this.globalConfig.indexGroupSize == 9) {
          this.swiperHeightStyle = 'height: 700rpx;'
        } else if (this.globalConfig.indexGroupSize == 12) {
           this.swiperHeightStyle = 'height: 1060rpx;'
        }
        this.extMenu = extMenu;
      },
      getByPaganation: function (list, size = 6) {
        if (!list) {
          return [];
        }
        var b = _.chunk(list, size);
        return b;
      },
      getTime() {
        var time = new Date();
        var hours = time.getHours();
        var state = '';
        if (hours >= 0 && hours <= 10) {
          state = "早上好！";
        } else if (hours > 10 && hours <= 14) {
          state = "中午好！";
        } else if (hours > 14 && hours <= 18) {
          state = "下午好!";
        } else if (hours > 18 && hours <= 24) {
          state = "晚上好!";
        }
        return state;
      },
      updateNumber: function () {
        var vm = this;
        // 如果还没加载
        vm.getAndLoad("数字接口", '/mobile/wx/count/count.jsp?userId=' + vm.userInfo.userId, (data) => {
            var obj = {};
            data.forEach(n => {
              obj[n.name] = n.value;
            });
            vm.numObj = obj;
            // data.forEach(item => {
            //   var targetItem = vm.tipList.find(n => n.name == item.name);
            //   if (targetItem) {
            //     targetItem.num = item.value;
            //     // targetItem.name = targetItem.name + targetItem.num;
            //   }
            //   vm.menuConfigs.extMenus.forEach(group => {
            //     targetItem = group.list.find(n => n.name == item.name);
            //      if (targetItem) {
            //       targetItem.num = item.value;
            //       // targetItem.name = targetItem.name + targetItem.num;
            //     }
            //   });
            // });
        });
      },

      loadContents: function () {
        var vm = this;
        // 如果还没加载
        vm.contents.forEach((n, i) => {
          vm.getAndLoad("获取文章列表", '?userId=' + vm.userInfo.userId + '&coloumId=' + n.columnId, (res) => {
            n.list = res.data;
            if (vm.contentTabIndex == -1 && i == 0) {
              vm.contentTabIndex = 0;
            }
            if (i == vm.contents.length - 1) {
              vm.contentLoaded = true;
            }
          });
        });
      },
      showContentDetail: function (item) {
        var vm = this;
        var ctab = vm.contents[vm.contentTabIndex];
        var h5Url = `/mobile/wx/coloum/view.jsp?userId=${vm.userInfo.userId}&coloumId=${ctab.columnId}&id=${item.id}&relEntity=${item.relEntity}`;
        vm.gotoH5Page(h5Url);
      },
      onContentTabClick: function (v) {
        this.contentTabIndex = v.index;
      },
      onGotUserInfo: function (e) {
        uni.getUserProfile({
          desc: "获取微信用户基本信息",
          success: function (infoRes) {
            uni.$u.toast(infoRes.userInfo.nickName);
          },
        });
      },
      loadGgtz: function () {
        var vm = this;
        if (vm.globalConfig.IndexGgtzConfig) {
          vm.getAndLoad('公告通知', vm.globalConfig.IndexGgtzConfig.loadApi + '&userId=' + vm.userInfo.userId, function (res) {
            vm.ggtzItem = res.data && res.data.length ? res.data[0] : '';
          });  
        } 
      }
    },
  };
</script>

<style lang="scss" scoped>
  .grTitle {
    width: 100vw;
    height: 335rpx;
    // background-color: aqua;
    background: url("#{$APIPATH}/wxAssets/wxImages/imgs/grbg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;

    .name {
      position: absolute;
      left: 31rpx;
      top: 130rpx;
      font-size: 36rpx;
      color: #242526;
    }

    .welcome {
      position: absolute;
      left: 31rpx;
      top: 221rpx;
      font-size: 28rpx;
      color: #63666a;
    }
  }

  .tips {
    width: 92%;
    margin: 29rpx auto;
    margin-top: -30rpx;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tip {
      // background: url("#{$APIPATH}/wxAssets/wxImages/imgs/tb1.png") no-repeat;
      // background-size: 100% 100%;
      //z-index: 999;
      width: 335rpx;
      height: 144rpx;
      position: relative;
      background: #fff;
      border-radius: 20rpx;
      position: relative;

      .txt {
        width: 185rpx;
        height: 77rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        // background-color: aqua;
        position: absolute;
        top: 35rpx;
        left: 30rpx;

        .intro {
          font-size: 36rpx;
          color: #212121;
        }

        .num {
          font-size: 24rpx;
          color: #8d8d8c;

          .zi {
            color: #fa6161;
            font-weight: bold;
            font-size: 32rpx;
          }
        }
      }
      .iconImg {
        position: absolute;
        right: 20rpx;
        top: 30rpx;
        image {
          width: 103rpx;
          height: 105rpx;
        }
      }
    }

    .tb2 {
      background: url("#{$APIPATH}/wxAssets/wxImages/imgs/tb2.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  .notice {
    width: 92%;
    height: 120rpx;
    margin: 20px auto;
    background: url("#{$APIPATH}/wxAssets/wxImages/imgs/tzbg.png") no-repeat;
    background-size: 100% 100%;

    .nr {
      width: 78%;
      height: 100%;
      // margin: 0 auto;
      margin-left: 20%;
      // background-color: #fa6161;
      display: flex;
      justify-content: start;
      align-items: center;

      /deep/.u-notice-bar {
        width: 70%;
      }
    }
  }

  .top-ad {
    height: 176rpx;
    margin: 20rpx 30rpx;

    /deep/ .u-swiper {
      height: 176rpx !important;
    }

    .swiper {
      height: 176rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .commonMenus {
    display: flex;
    flex-wrap: wrap;
    margin: 30rpx;
    justify-content: space-around;

    .buttom {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;

      .name {
        font-size: 26rpx;
        white-space: nowrap;
      }
      .num {
        position: absolute;
        right: 0;
        top: 0;
        background: #f00;
        color: #fff;
      }

      .logo {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10rpx;

        .icon {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }

  .extMenus {
    margin: 0 30rpx 30rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx 20rpx 10rpx;

    .group-name {
      font-size: 34rpx;
      margin-bottom: 30rpx;
    }

    .list {
      display: flex;
      flex-wrap: wrap;

      .buttom {
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 30rpx;
        position: relative;
        .name {
          font-size: 26rpx;
          white-space: nowrap;
        }
        .num {
          position: absolute;
          right: 24px;
          top: 2px;
          background: #f00;
          color: #fff;
          border-radius: 50%;
          min-width: 30rpx;
          text-align: center;
        }

        .logo {
          width: 134rpx;
          height: 134rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 10rpx;

          .icon {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .indexColumns {
    margin: 0 30rpx 30rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx;

    .contentList {
      .contentItem {
        margin: 20rpx;
        display: flex;

        .pic {
          image {
            width: 198rpx;
            height: 132rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
          }
        }

        .detail {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            color: $lw_text_2;
            font-size: 28rpx;
            word-wrap: break-word;
            word-break: break-all;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .date {
            color: $lw_text_3;
            font-size: 24rpx;
            margin-bottom: 10rpx;
          }
        }
      }
    }
  }
</style>